<template>
  <div id="viewBox">
    <div id="ImgBox" @click="close">
      <img src="static/images/left.png" alt="" class="jt" type="pre" @click="changeImg">
      <div v-if="wImageLists.length!=0">
        <img v-if="wImageLists[wIndex]['flag']===1" :src="wImageLists[wIndex]['fileName']+'?x-oss-process=image/resize,w_800/watermark,text_6LaK6YeO5L6g,t_80,g_se,x_10,y_10,size_20,color_ffffff'" alt="" class="mainPic" @click="stop">
        <div v-else-if="wImageLists[wIndex]['flag']===2" id="videoBox" @click="stop">
          <img :src="wImageLists[wIndex]['thumFileName']" alt="" @click="playFun">
        </div>
      </div>
      <img src="static/images/right.png" alt="" class="jt" type="next" @click="changeImg">
      <p v-if="wImageLists.length!=0 && wImageLists[wIndex]['flag']===2 && playStatus" class="playBtn" @click="playFun"></p>
    </div>
    <p id="numBox">{{wIndex+1}}/{{wImageLists.length}}</p>
  </div>
</template>

<script>
    import Util from "../assets/Util";
    export default {
        name: "wview",
        props:{
          imgLists:Array,
          Index:Number
        },
        data(){
          return {
            wImageLists:this.imgLists,
            wIndex:this.Index,
            playStatus:true
          }
        },
        methods:{
            changeImg(e) {
              e.stopPropagation();
              let type = e.target.getAttribute("type");
              let len = this.wImageLists.length - 1;
              this.playStatus = true;
              if (type === "pre") {
                if (this.wIndex <= 0) {
                  this.wIndex = len;
                } else {
                  this.wIndex -= 1;
                }
              } else {
                if (this.wIndex >= len) {
                  this.wIndex = 0;
                } else {
                  this.wIndex += 1;
                }
              }
            },
            close(e){
              this.$emit("closeView");
            },
           playFun(e){
              let that = this;
              e.stopPropagation();
              this.videoID = this.wImageLists[this.wIndex]['fileName'];
              this.$nextTick(function () {
                that.playStatus = false;
                that.getOauth();
              });
            },
            stop(e){
               e.stopPropagation();
            },
            // 获取视频播放权限
            getOauth(){
              let that = this;
              let props = {
                "url":"/Video/GetPlayAuth",
                "data":{
                  "videoID":this.videoID
                },
                sCallBack:(res) => {
                  document.getElementById("videoBox").innerHTML = "";
                  that.makePlayer(res);
                },
                eCallBack:(err) => {
                  console.log(err);
                }

              };
              Util.myRequest(props);
            },
            makePlayer(playerInfo){
              var playerData = playerInfo.data.data;
              let player = new Aliplayer({
                id: "videoBox", // 容器id
                vid : playerData['videoId'],
                playauth : playerData['playAuth'],
                width: "100%",
                height: "100%",
                skinLayout:[
                  {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
                  {
                    name: "H5Loading", align: "cc"
                  },
                  {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
                  {name: "infoDisplay"},
                  // {name:"tooltip", align:"blabs", x: 0, y: 56},
                  {name: "thumbnail"},
                  {
                    name: "controlBar",
                    align: "blabs",
                    x: 0,
                    y: 0,
                    children: [
                      {name: "progress", align: "blabs", x: 0, y: 44},
                      {name: "playButton", align: "tl", x: 15, y: 25},
                      {name: "timeDisplay", align: "tl", x: 10, y: 22},
                      {name: "fullScreenButton", align: "tr", x: 10, y: 25},
                      {name:"subtitle", align:"tr", x:15, y:25},
                      {name:"setting", align:"tr", x:15, y:25},
                      {name: "volume", align: "tr", x: 5, y: 25}
                    ]
                  }
                ]
              }, function(player){
                console.log('播放器创建了');
              });
            }
        },
      watch:{
        imgLists:{
          handler(newValue, oldValue){
            this.wImageLists = newValue;
          }
        },
        Index:{
          handler(newValue){
            this.wIndex = newValue;
          }
        }
      },
      mounted(){
      }
    }
</script>

<style scoped>
  #viewBox{
    width:100%;
    height:100%;
    position: relative;
  }
  #ImgBox{
    background: rgba(0,0,0,0.8);
    width:80vw;
    height:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 10vw;
  }
  #ImgBox img.mainPic{
    max-height:80%;
    max-width:80%;
  }
  .jt{
    width:40px;
    cursor:pointer;
  }
  #numBox{
    position: absolute;
    bottom:20px;
    text-align: center;
    color:#fff;
    width: 100%;
  }
  #videoBox{
    width:465px !important;
    height:828px !important;
  }
  #ImgBox #videoBox img{
    width:100% !important;
    height:100% !important;
  }
</style>
